{extend name="template/base" /}
{block name="content"}
<div class="page-container">
   
    <div class="cl pd-5 bg-1 bk-gray">
        <span class="l">
            <a class="btn btn-primary radius mr-5" href="{:url('admin/demo/imageupload')}"><i class="Hui-iconfont"></i> 添加</a>
        </span>
        <span class="r pt-5 pr-5">
            共有数据 ：<strong>{$count ?? '0'}</strong> 条
        </span>
    </div>
    <table class="table table-border table-bordered table-hover table-bg mt-20">
        <thead>
        <tr class="text-c">
            <th width="25"><input type="checkbox"></th>
            <!--<th width="">id</th>-->
            <th width="">名称</th>
            <th width="">一级分类</th>
            <th width="">二级分类</th>
            <th width="">型号规格</th>
            <th width="">图纸编号</th>  
            <th width="">产品编号</th> 
            <th width="">材质</th>      
            <th width="">重量</th>           
            <th width="">BOM编码</th>           
            <th width="70">操作</th>
        </tr>
        </thead>

        <tbody id="dragarticle" class="sortable">
        
        {volist name="list" id="vo"}
        <!--{:dump($list)}-->
        <tr class="text-c" id="{$vo.id}">
            <td><input type="checkbox" name="id[]" value=""></td>
            <!--<td>{$vo.id}</td>-->
            <td> <input type="hidden" value="{$vo.sort}" class="articlesort"/>{$vo.name}</td>
            <td>{$vo.type_name}</td>
            <td>{$vo.stype_name}</td>
            <td>{$vo.xinghao}</td>
            <td>{$vo.tuzhibianhao}</td>
            <td>{$vo.chanpingbianhao}</td>
            <td>{$vo.caizhi}</td>
            <td>{$vo.zhongliang}</td>            
            <td>{$vo.bom}</td>
            

            <td class="f-14">
                <a style="text-decoration:none" class="ml-5"  href="{:url('admin/demo/imageuploadedit',['id'=>$vo.id])}" title="编辑"><i class="Hui-iconfont">&#xe6df;</i></a>
                <a style="text-decoration:none" class="ml-5" data-spy="delete_data" data-uid="{$vo.id}"  href="javascript:;" title="删除"><i class="Hui-iconfont">&#xe6e2;</i></a>                  
            </td>
        </tr>
        {/volist}
        </tbody>
    </table>
    <div class="page-bootstrap">{$page ?? ''}</div>
</div>
{/block}
{block name="script"}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/jquery-ui.js"></script>
<script>
       $('[data-spy="delete_data"]').on('click', function() {
        var infoid =$(this).data('uid');
        layer.confirm('确认要该数据吗？',{icon:0},function(index){
            var index = layer.load(3);
            $.ajax({
                url: '/admin/Demo/deleteData',
                type: "POST",
                data:{
                    'id':infoid,                  
                },
                success: function(data){
                    layer.close(index);
                    var datas = JSON.parse(data);
                    if(datas.success!=true){
                        layer.alert(datas.msg,{title: '错误信息',icon: 2});
                        return;
                    }
                    layer.msg('已删除!',{icon:1,time:1000},function(index){                            
                            location.reload();                           
                        });
                },
                error:function(XMLHttpRequest){
                    layer.close(index);
                    layer.alert('数据处理失败! 错误码:'+XMLHttpRequest.status,{title: '错误信息',icon: 2});
                }
            });
        });

       });
   
    $(function () {
        $("[name='select']").find("[value='{$Request.param.select}']").attr("selected", true);
    })


    $(function() {
    $(".sortable").sortable({
        cursor: "move",
        items: "tr", //只是tr可以拖动
        opacity: 0.6, //拖动时，透明度为0.6
        revert: true, //释放时，增加动画
        update: function(event, ui) { //更新排序之后
        var categoryids = $(this).sortable("toArray");
        var $this = $(this);
        $.ajax({
            url: "/admin/Upload/fileSort",
            type: 'POST',
            data: 'categoryids=' + categoryids,
            success: function(json) {
                console.log(json)
            if (json == 1) {
                layer.msg('移动成功', {
                icon: 1
                });
            } else {
                $this.sortable("cancel");
                layer.msg('移动失败', {
                icon: 2
                });
            }
            }
        });
        }
    });
    $(".sortable").disableSelection();
    });






















    // function changeArticle(){
    //     console.log('121212')
    //     var sorts = [];
    //     $("#dragarticle>tr").each(function(){
    //         var id = $(this).attr("value");
    //         var sort = $(this).find(".articlesort").val();
    //         console.log(sort)
    //         sorts.push({
    //             'id':id,
    //             'sort':sort,
    //         });
    //     });
    //     return sorts;
    // }
    // var fixHelper = function(e, ui) {
    //     //console.log(ui)
    //     ui.children().each(function() {
    //         $(this).width($(this).width());  //在拖动时，拖动行的cell（单元格）宽度会发生改变。在这里做了处理就没问题了
    //     });
    //     return ui;
    // };
    // $(function(){
    //     console.log('拖拽')
    //     var length = $('#dragarticle tr').length;
    //     if(length>0) {
    //         $('#dragarticle').sortable({helper: fixHelper,axis:"y", placeholder: "ui-state-highlight"}).bind('sortupdate', function () {
    //             var sort_arr = [];
    //             sort_arr = changeArticle();
    //             sort_arr = JSON.stringify(sort_arr);
    //             // console.log(sort_arr)
    //             $.post('/admin/Upload/fileSort', {'sorts': sort_arr}, function (data) {
    //                 console.log(data)
    //                 // if (data.code == "200" || data.code == 200) {

    //                 // } else {
    //                 // 	$('.fail_message').show();
    //                 // 	$("#fail_message").html(data.message);
    //                 // }
    //             });
    //         });
    //     }
    // });


</script>
{/block}

